
@import "../common";

/**一级菜单**/
@mixin menu-item-style {
  height: 46px;
  line-height: 46px;
  border: 0 none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #121212;
  box-shadow: 0 1px 0 0 #2c2c2c;
  color: $color-white;
  i {
    width: 18px;
    margin-right: 15px;
    font-size: 16px;
    color: $color-white;
    text-align: center;
  }
}

/**激活菜单**/
@mixin menu-active {
  border-left-color: $color-green;
  color: $color-green;
  i {
    color: $color-green;
  }
}

.menu_box{
  width: 100%;
  overflow: hidden;
  .el-menu{
    border-right: 0 none !important;
    background-color: #1b1b1b;
    .el-menu-item{
      @include menu-item-style;
      &:hover,&:focus {
        background-color: #282828;
      }
      &.is-active{
        @include menu-active;
      }
    }
    >.el-submenu{
      .el-submenu__title {
        @include menu-item-style;
        .el-submenu__icon-arrow {
          font-size: $font-size-default;
          color: #76806f;
        }
        &:hover {
          background-color: #282828;
        }
      }
      &.is-opened {
        background-color: #282828;
        .el-submenu__title {
          // background: pink !important; // 选中头部份样式变化
          @include menu-item-style;
          .el-submenu__icon-arrow {
            color: #76806f;
          }
        }
      }
      &.is-active{
        .el-submenu__title {
          @include menu-active;
        }
      }
      .el-menu-item{
        height: 32px;
        line-height: 32px;
        padding-left: 60px !important;
        font-size: 12px;
        color: $color-white;
        border-bottom: $border-none;
        border-left: $border-none;
        box-shadow: none;
        &:before {
          display: inline-block;
          content: "";
          width: 4px;
          height: 4px;
          margin: 14px 10px 0 0;
          border-radius: 50%;
          background-color: $color-white;
          vertical-align: top;
        }
        &:focus, &:hover{
          background-color: transparent;
        }
        &:hover {
          color: $color-green;
        }
        &.is-active {
          color: $color-green;
          &:before {
            background-color: $color-green;
          }
        }
      }
    }
  }
}

